{% block sw_tagged_field %}
<sw-block-field
    class="sw-tagged-field"
    :class="taggedFieldClasses"
    v-bind="$attrs"
>
    <template #sw-field-input="{ identification, error, disabled, size, setFocusClass, removeFocusClass }">
        {% block sw_tagged_field_inner %}
        <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
        <ul
            class="sw-tagged-field__tag-list"
            @click="setFocus(true)"
        >
            <li
                v-for="(tag, index) in value"
                :key="`sw-tagged-field-value--${index}`"
            >
                <sw-label
                    :dismissable="!disabled"
                    :size="size"
                    @selected="setFocus(true)"
                    @dismiss="dismissTag(index)"
                >
                    {{ tag }}
                </sw-label>
            </li>
            {% block sw_tagged_field_item_input %}
            <li class="sw-tagged-field__input-list-entry">
                {% block sw_tagged_field_input %}
                <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
                <input
                    ref="taggedFieldInput"
                    v-model="newTagName"
                    type="text"
                    class="sw-tagged-field__input"
                    :class="taggedFieldInputClasses"
                    :disabled="disabled"
                    :placeholder="placeholder"
                    @focus="setFocus(true)"
                    @blur="setFocus(false)"
                    @keydown="performAddTag"
                    @keydown.delete="dismissLastTag"
                >
                {% endblock %}
            </li>
            {% endblock %}
        </ul>
        {% endblock %}
    </template>

    <template #label>
        <slot name="label"></slot>
    </template>

    <template #hint>
        <slot name="hint"></slot>
    </template>
</sw-block-field>
{% endblock %}
